<div class="comp-coins">
    <div class="coins-tab">
        <div class="coins-tab-left">
            <span class="tab-item" v-for="(item, $key) in symbolConfig.MARKET_TABS"
                :class="{'active': isActive === $key}"
                @click="changeTab($key)">{{ $t('common.' + $key + '_Exchange') }}</span>
        </div>
        <div class="coins-tab-right">
            <div class="search-item">
                <input class="search-input" v-model="keyCoin" />
                <i class="icon icon-search"></i>
            </div>
        </div>
    </div>
    <div class="m-table-flex">
        <table class="table-cont">
            <thead>
                <tr>
                    <th></th>
                    <th width="14%" @click="sortByKey(SORT_KEY.symbol)">
                        <span class="text">{{ $t('coins.tradePairs') }}</span>
                        <template v-if="currentSortKey === SORT_KEY.symbol">
                            <i class="icon price-up" v-if="currentSortOrder === SORT_UP"></i>
                            <i class="icon price-down" v-if="currentSortOrder === SORT_DOWN"></i>
                        </template>
                    </th>
                    <template v-if="isActive !== 'ico'">
                        <th width="16%" @click="sortByKey(SORT_KEY.price)">
                            <span class="text">{{ $t('coins.lastTadePrice') }}</span>
                            <template v-if="currentSortKey === SORT_KEY.price">
                                <i class="icon price-up" v-if="currentSortOrder === SORT_UP"></i>
                                <i class="icon price-down" v-if="currentSortOrder === SORT_DOWN"></i>
                            </template>
                        </th>
                        <th width="10%" @click="sortByKey(SORT_KEY.changeRatio)">
                            <span class="text">{{ $t('common.comp.marketInfo.dayPrice') }}</span>
                            <template v-if="currentSortKey === SORT_KEY.changeRatio">
                                <i class="icon price-up" v-if="currentSortOrder === SORT_UP"></i>
                                <i class="icon price-down" v-if="currentSortOrder === SORT_DOWN"></i>
                            </template>
                        </th>
                        <th width="12%" @click="sortByKey(SORT_KEY.highPrice)">
                            <span class="text">{{ $t('common.comp.marketInfo.dayHigh') }}</span>
                            <template v-if="currentSortKey === SORT_KEY.highPrice">
                                <i class="icon price-up" v-if="currentSortOrder === SORT_UP"></i>
                                <i class="icon price-down" v-if="currentSortOrder === SORT_DOWN"></i>
                            </template>
                        </th>
                        <th width="12%" @click="sortByKey(SORT_KEY.lowPrice)">
                            <span class="text">{{ $t('common.comp.marketInfo.dayLow') }}</span>
                            <template v-if="currentSortKey === SORT_KEY.lowPrice">
                                <i class="icon price-up" v-if="currentSortOrder === SORT_UP"></i>
                                <i class="icon price-down" v-if="currentSortOrder === SORT_DOWN"></i>
                            </template>
                        </th>
                        <!-- <th width="8%"  @click="sortByKey(SORT_KEY.tradeFee)">
                        <span class="text">{{ $t('coins.tradeFee') }}</span>
                        <template v-if="currentSortKey === SORT_KEY.tradeFee">
                            <i class="icon price-up" v-if="currentSortOrder === SORT_UP"></i>
                            <i class="icon price-down" v-if="currentSortOrder === SORT_DOWN"></i>
                        </template>
                    </th> -->
                        <th class="th-center" width="18%" @click="sortByKey(SORT_KEY.cumulative)">
                            <span class="text">{{ $t('common.comp.marketInfo.dayVolume') }}</span>
                            <template v-if="currentSortKey === SORT_KEY.cumulative">
                                <i class="icon price-up" v-if="currentSortOrder === SORT_UP"></i>
                                <i class="icon price-down" v-if="currentSortOrder === SORT_DOWN"></i>
                            </template>
                        </th>
                    </template>
                    <template v-if="isActive === 'ico'">
                        <th width="302" @click="sortByKey(SORT_KEY.price)">
                            <span class="text">{{ $t('coins.lastTadePrice') }}</span>
                            <template v-if="currentSortKey === SORT_KEY.price">
                                <i class="icon price-up" v-if="currentSortOrder === SORT_UP"></i>
                                <i class="icon price-down" v-if="currentSortOrder === SORT_DOWN"></i>
                            </template>
                        </th>
                        <th width="150" @click="sortByKey(SORT_KEY.changeRatio)">
                            <span class="text">{{ $t('common.comp.marketInfo.dayPrice') }}</span>
                            <template v-if="currentSortKey === SORT_KEY.changeRatio">
                                <i class="icon price-up" v-if="currentSortOrder === SORT_UP"></i>
                                <i class="icon price-down" v-if="currentSortOrder === SORT_DOWN"></i>
                            </template>
                        </th>
                        <th width="168" @click="sortByKey(SORT_KEY.highPrice)">
                            <span class="text">{{ $t('common.comp.marketInfo.dayHigh') }}</span>
                            <template v-if="currentSortKey === SORT_KEY.highPrice">
                                <i class="icon price-up" v-if="currentSortOrder === SORT_UP"></i>
                                <i class="icon price-down" v-if="currentSortOrder === SORT_DOWN"></i>
                            </template>
                        </th>
                        <th width="200" @click="sortByKey(SORT_KEY.cumulative)">
                            <span class="text">{{ $t('common.comp.marketInfo.dayVolume') }}</span>
                            <template v-if="currentSortKey === SORT_KEY.cumulative">
                                <i class="icon price-up" v-if="currentSortOrder === SORT_UP"></i>
                                <i class="icon price-down" v-if="currentSortOrder === SORT_DOWN"></i>
                            </template>
                        </th>
                        <th width="168" @click="sortByKey(SORT_KEY.lowPrice)">
                            <span class="text">{{ $t('common.comp.marketInfo.dayLow') }}</span>
                            <template v-if="currentSortKey === SORT_KEY.lowPrice">
                                <i class="icon price-up" v-if="currentSortOrder === SORT_UP"></i>
                                <i class="icon price-down" v-if="currentSortOrder === SORT_DOWN"></i>
                            </template>
                        </th>
                        <th width="60">{{$t('coins.statusTitle')}}</th>
                    </template>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, $index) in currentCoins"
                    v-if="isLoading === false && currentCoins.length > 0 && (keyCoin === '' || item.symbol.indexOf(keyCoin.toUpperCase())>=0)"
                    @click="goPage(item)" :class="{'tr--disable': item.status ==='INIT'}">
                    <template v-if="item.status ==='LISTED' || item.status ==='DELISTED'">
                        <td>
                            <img style="margin-right:10px" v-if="item.assetCode2!='USDT'" width="32px" :src="item.img" />
                            <img style="margin-right:10px" v-if="(item.assetCode2=='USDT'&&item.img)" width="32px" :src="item.img" alt />
                            <img style="margin-right:10px" v-if="(item.assetCode2=='USDT'&&!item.img)" width="32px" src="/img/usdt@2x.png" alt />
                        </td>
                        <td>
                            <span class="text-weight">{{item.assetCode2 + '/' + item.assetCode1}}</span>
                        </td>
                        <td>
                            <span class="text"><span class="text-gray">{{item.price}}</span> {{item.assetCode1}}</span>
                            <!-- <span class="text-black">$ {{item.priceUSD}}</span>
                            <span class="text-black">￥{{item.priceRMB}}</span> -->
                        </td>
                        <td class="td-right"
                            :class="{'fn-color-buy':+item.changeRatio>=0, 'fn-color-sell':+item.changeRatio<0}">
                            <span class="span-right">{{item.changeRatio}}%</span></td>
                        <td><span v-html="formatPrice(item.highPrice)"></span> {{item.assetCode1}}</td>
                        <td><span v-html="formatPrice(item.lowPrice)"></span> {{item.assetCode1}}</td>
                        <!-- <td class="font-fee">{{item[symbolConfig.ASSETFEERATE] | ratio}}%</td> -->
                        <td><span class="item-right" v-html="formatMoney(item.cumulative)"></span> {{item.assetCode2}}
                        </td>
                    </template>
                    <template v-if="item.status ==='INIT'">
                        <td>
                            <img style="margin-right:10px" width="32px" :src="item.img" />
                        </td>
                        <td class="font-gray">{{item.assetCode2 + '/' + item.assetCode1}}</td>
                        <td>
                            <span class="text">-- {{item.assetCode1}}</span>
                            <!-- <span class="text-gray text-gray--80">$ --</span>
                            <span class="text-gray text-gray--80">￥--</span> -->
                        </td>
                        <td class="td-right"><span class="span-right">-- %</span></td>
                        <td>-- {{item.assetCode1}}</td>
                        <td>-- {{item.assetCode1}}</td>
                        <td><span class="item-right">--</span> {{item.assetCode2}}</td>
                    </template>
                </tr>
                <tr v-if="isLoading === true">
                    <td colspan="8">
                        <loading></loading>
                    </td>
                </tr>
                <tr v-if="isLoading === false && currentCoins && currentCoins.length === 0">
                    <td colspan="7">
                        <no-data></no-data>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>